<template>
  <div class="container">
    <div id="agreement-renderer" v-if="readingContent != null">
      <div id="renderer-show">
        <div class="text-center">
          <h3>{{ readingContent.title }}</h3>
          <span class="text-secondary"
            >{{ $t("agreement.release") }}
            {{ new Date(readingContent.date).toLocaleString() }}</span
          >
          <br />
        </div>
        <div class="px-5 mx-5 pt-3">
          <span v-html="readingContent.content"></span>
        </div>
        <div class="text-center pt-5">
          <a href="#" @click="$router.back()"
            >{{ $t("common.actions.goback") }}
          </a>
        </div>
      </div>
    </div>
    <div v-else>
      <not-found-page></not-found-page>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import NotFoundPage from "./Errors/NotFoundPage.vue";

const { t } = useI18n();
const route = useRoute();

const readingPage = ref(
  route.params["page"] ? route.params["page"] : route.query["page"]
);

const readingContent = computed(() => {
  if (
    t("agreement.agreements." + readingPage.value + ".content") ===
    "agreement.agreements." + readingPage.value + ".content"
  ) {
    return null;
  }
  const content = {
    content: t(
      "agreement.agreements." + readingPage.value + ".content"
    ).replace(/(?:\r\n|\r|\n)/g, "<br />"),
    date: t("agreement.agreements." + readingPage.value + ".date"),
    title: t("agreement.agreements." + readingPage.value + ".title"),
  };
  return content;
});
</script>
